<template>
    <div class="search_container">
        <div class="top">
            <form action="/">
                <Search v-model="keyword" show-action :placeholder="defaultWord" @search="onSearch" @cancel="onCancel" />
            </form>
        </div>
        <div v-show="!keyword" class="mid">
            <div class="history">
                <div class="history_top">
                    <span>历史记录</span>
                    <Icon name="delete-o" size="18" @click="delSearchHistory" />
                </div>
                <div class="history_content">
                    <div class="tag_item" v-for="(item, index) in searchHistory" :key="index">
                        <van-tag plain color="#333" size="large" @click="toInside(item)">{{ item }}</van-tag>
                    </div>
                </div>
            </div>
            <div class="hot">
                <div class="hot_top">
                    <span>热门搜索</span>
                </div>
                <div class="hot_content">
                    <div class="tag_item" v-for="(item, index) in hotKeywordVOList" :key="index">
                        <van-tag plain :color="index == 0 ? 'red' : '#333'" size="large" @click="toInside(item.keyword)">{{ item.keyword }}</van-tag>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="keyword" class="bottom">
            <!-- 搜索实时提示 用cell -->
            <van-cell v-for="(item,index) in searchWordList" @click="toInside(item)" :key="index" :title="item" is-link />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search, Icon, showFailToast,Cell } from 'vant';
import { ref, onMounted, watch } from 'vue';
import { getSearch, searchWord } from '@/api/search';
import { useRouter } from 'vue-router';
import { throttle } from 'lodash'
const router = useRouter()
const keyword = ref('')
const hotKeywordVOList = ref<any[]>([])
const searchHistory = ref<string[]>([])
const defaultWord = ref('')
const searchWordList = ref<string[]>([])
// 页面加载 热门关键字
onMounted(() => {
    searchHistory.value = JSON.parse(localStorage.getItem('SERACHHISTORY') as string) || []
    getSearchData()
})
// 功能函数
const getSearchData = async () => {
    try {
        let res = await getSearch()
        hotKeywordVOList.value = res.data.data.hotKeywordVOList
        defaultWord.value = res.data.data.defaultKeywords[res.data.data.defaultKeywords.length - 2].keyword
        console.log(defaultWord.value);

    } catch (error) {
        showFailToast('获取数据失败');
    }
}
// 删除搜索记录
const delSearchHistory = () => {
    searchHistory.value = []
    localStorage.removeItem('SERACHHISTORY')
}

// 提示词功能函数
const getSearchWord = async (val: string) => {
    try {
        let res = await searchWord(val || defaultWord.value)
        searchWordList.value = res.data.data
    } catch (error) {

    }
}

watch(() => keyword.value, (nval) => {
    getSearchWord(nval)
})
// tag、cell跳转
const toInside = (word:string) => {
    searchHistory.value.push(word)
    localStorage.setItem('SERACHHISTORY', JSON.stringify(searchHistory.value))
    router.push({
            name: 'searchInside',
            query: {
                word
            }
        })
}
// 搜索事件
const onSearch = () => {
    if (keyword.value.trim()) {
        searchHistory.value.push(keyword.value)
        // 将搜索记录存入localStorage
        localStorage.setItem('SERACHHISTORY', JSON.stringify(searchHistory.value))
        router.push({
            name: 'searchInside',
            query: {
                word:keyword.value
            }
        })
    }
    keyword.value = ''   
}

// 取消事件
const onCancel = () => {
    router.back()
}


</script>

<style lang="less" scoped>
.search_container {
    background-color: #eee;
    width: 100%;
    min-height: 667px;

    .top {
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .mid {
        .history {
            background-color: #fff;
            padding: 15px;
            margin-bottom: 10px;

            .history_top {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
            }

            .history_content {
                display: flex;
                flex-wrap: wrap;

                .tag_item {
                    margin: 0 16px 16px 0;
                }
            }
        }

        .hot {
            background-color: #fff;
            padding: 15px;

            .hot_top {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
            }

            .hot_content {
                display: flex;
                flex-wrap: wrap;

                .tag_item {
                    margin: 0 16px 16px 0;
                }
            }
        }
    }


}
</style>